<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    [v-cloak] {
        display: none;
    }
</style>

<body>
    <div id="app" v-cloak>
        <div v-if="books.length">
            <table style="margin: 0% auto;">
                <!-- 头部 -->
                <thead>
                    <tr>
                        <th></th>
                        <th>书籍名称</th>
                        <th>出版日期</th>
                        <th>价格</th>
                        <th>购买数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <!-- 主题内容 -->
                <tbody>
                    <tr v-for="(book,index) in books">
                        <td>{{index+1}}</td>
                        <!-- 如果属性名字是count这个属性的话，则不显示 -->
                        <td>
                            {{book.name}}
                        </td>
                        <td>
                            {{book.date}}
                        </td>
                        <td>
                            <!-- 使用过滤器 -->
                            {{book.price | showPrice}}
                        </td>
                        <td>
                            <button @click="preClick(index)" :disabled="book.count <= 1">-</button>
                            {{book.count}}
                            <button @click="addClick(index)">+</button>
                        </td>
                        <td>
                            <button @click="removeClick(index)">删除</button>
                        </td>
                    </tr>
                    <h1>总价格：{{totalPrice}}</h1>
                </tbody>
            </table>
        </div>
        <div v-else>
            <h1>购物车为空</h1>
        </div>
    </div>

</body>
<script src="../js/http_cdn.bootcdn.net_ajax_libs_vue_2.6.6_vue.js"></script>
<script>
    new Vue({
        el: "#app",

        data: {
            books: [
                {
                    name: '《算法导论》',
                    date: '2010-09-01',
                    price: '10.00',
                    count: 1,
                },
                {
                    name: '《Linux系统深入》',
                    date: '2010-09-01',
                    price: '20.00',
                    count: 2,
                },
                {
                    name: '《编程珠玑》',
                    date: '2010-09-01',
                    price: '30.00',
                    count: 4,
                },
                {
                    name: '《代码大全》',
                    date: '2010-09-01',
                    price: '40.00',
                    count: 1,
                },
            ]
        },
        methods: {
            addClick(index) {
                this.books[index].count++
            },
            preClick(index) {
                if (this.books[index].count > 1) {
                    this.books[index].count--
                }
            },
            removeClick(index) {
                this.books.splice(index, 1)
            }
        },
        computed: {
            totalPrice() {
                let res = 0

                for (const book of this.books) {
                    res += (book.price * book.count) - 0
                }
                return '￥' + (res - 0).toFixed(2)
            }
        },
        // 过滤器
        filters: {
            showPrice(price) {
                return '￥' + (price - 0).toFixed()
            }
        }
    })

</script>

</html>
